<template>
  <div class="ad-form">
    <div class="wrapper">
      <el-form size="mini" inline label-position="right" label-width="auto" ref="form" :model="form" v-loading="loading" :disabled="isDisableForm">
        <div class="ad-block">
          <div class="title-bar">运单号：<value :model="detailData" prop="transport.transportNo"/>　【 运单创建时间：<value :model="detailData"　prop="createTime" type="datetime"/>　创建人：<value :model="detailData"　prop="createUserName"/> 】</div>
          <el-row>
            <el-col>
              <div class="item">
                <div class="label">运输路线：</div>
                <div class="value"><value :model="detailData" prop="transport.line" type="line"/></div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="5">
              <div class="item">
                <div class="label">承运类型：</div>
                <div class="value"><value :model="detailData" prop="transport.type" dictName="transport_type"/></div>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="item">
                <div class="label">承运公司：</div>
                <div class="value"><value :model="detailData" prop="transport.cargoCompany"/></div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="item">
                <div class="label">司机信息：</div>
                <div class="value">
                  <value :model="detailData" prop="transport.driverName"/><span v-html="'　'"></span>
                  <value :model="detailData" prop="transport.driverPhone"/>
                </div>
              </div>
            </el-col>
            <el-col :span="5">
              <div class="item">
                <div class="label">大板车牌：</div>
                <div class="value"><value :model="detailData" prop="transport.licensePlateNumber"/></div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="ad-block">
          <div class="title-bar">收货信息</div>
          <el-row>
            <el-col :span="5">
              <div class="item">
                <div class="label">交付方式：</div>
                <div class="value"><value :model="detailData" prop="type" dictName="delivery_type"/></div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="item">
                <div class="label">收货人信息：</div>
                <div class="value">
                  <value :model="detailData" prop="receiveUser"/><span v-html="'　'"></span>
                  <value :model="detailData" prop="receivePhone"/>
                </div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="item">
                <div class="label">承运费用：</div>
                <div class="value"><value :model="detailData" prop="driverFee" type="money"/></div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="item">
                <div class="label">欠返费用：</div>
                <div class="value"><value :model="detailData" prop="backReturnFee" type="money"/></div>
              </div>
            </el-col>
            <el-col :span="4">
              <div class="item">
                <div class="label">到付金额：</div>
                <div class="value"><value :model="detailData" prop="deliveryPayFee" type="money"/></div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col>
              <div class="item">
                <div class="label">收货地址：</div>
                <div class="value"><value :model="detailData" prop="receiveAddress"/></div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="ad-block">
          <div class="title-bar">交付信息</div>
          <el-row :gutter="35">
            <el-col>
              <el-form-item label="交付凭证：" prop="takeCarImageList" :rules="[{required: true, message: '请上传凭证'}]">
                <ad-upload v-model="form.takeCarImageList" multiple/>
              </el-form-item>
              <el-form-item label="交付备注：">
                <el-input v-model="form.remark" placeholder="请输入"/>
              </el-form-item>
            </el-col>
<!--            <el-col :span="10">-->
<!--              <el-form-item label="额外费用：" prop="spotPayFee" :rules="[{required: true, message: '请选择'}]">-->
<!--                <el-switch v-model="form.hasSite" active-text="是"></el-switch>-->
<!--              </el-form-item>-->
<!--              <el-row :gutter="14">-->
<!--                <el-col :span="12">-->
<!--                  <el-form-item label="费用类型：" prop="spotPayFee" :rules="[{required: true, message: '请选择'}]">-->
<!--                    <ad-status-select v-model="form.hasUrgent" :dict="dict.fee_type" />-->
<!--                  </el-form-item>-->
<!--                  <el-form-item label="结算人员：" prop="spotPayFee" :rules="[{required: true, message: '请输入'}]">-->
<!--                    <el-input placeholder="请输入"/>-->
<!--                  </el-form-item>-->
<!--                </el-col>-->
<!--                <el-col :span="12">-->
<!--                  <el-form-item label="结算金额：" prop="spotPayFee" :rules="[{required: true, message: '请输入'}]">-->
<!--                    <ad-input-number v-model="form.spotPayFee" append="元" :precision="2"/>-->
<!--                  </el-form-item>-->
<!--                  <el-form-item label="联系电话：" prop="spotPayFee" :rules="[{required: true, message: '请输入'}]">-->
<!--                    <el-input placeholder="请输入"/>-->
<!--                  </el-form-item>-->
<!--                </el-col>-->
<!--              </el-row>-->
<!--            </el-col>-->
          </el-row>
        </div>
        <div class="ad-block">
          <div class="title-bar">车辆信息<span class="tip">（请选择车辆，查看对应的验车信息）</span></div>
          <div class="table">
            <ad-table ref="orderTable" :data="orderList" @row-click="selectOrder" u-table>
              <ad-table-column label="订单编号" prop="orderSubNo"/>
              <ad-table-column label="制单人" prop="orderCreateUserName" w="5c"/>
              <ad-table-column label="制单时间" prop="orderCreateTime" ctype="datetime"/>
              <ad-table-column label="车辆名称" prop="carName" width="auto"/>
              <ad-table-column label="车牌/车架号" prop="vin" ctype="vin"/>
              <ad-table-column label="公里数(km)" w="5c"><template v-slot="{row}"><value :model="row" prop="orderCarVerify.km"/></template></ad-table-column>
              <ad-table-column label="承运费用" prop="cost" w="4c"/>
              <ad-table-column label="到付金额" prop="deliveryPayFee" w="4c"/>
              <ad-table-column label="欠返费用" prop="backReturnFee" w="4c"/>
              <ad-table-column label="是否代收" w="4c"><template v-slot="{row}">{{row.hasCollection ? '是' : '否'}}</template></ad-table-column>
            </ad-table>
          </div>
          <div class="order-block">
            <h3>验车时间：<value :model="curOrder" prop="orderCarVerify.createTime" type="datetime"/>　　验车人：<value :model="curOrder" prop="orderCarVerify.createUserName"/></h3>
          </div>
          <div class="order-block" v-if="curOrder.orderCarVerify && curOrder.orderCarVerify.validateImages && curOrder.orderCarVerify.validateImages.length > 0">
            <h3>外观、内饰验车照片<span class="tip">（图片包括：正前、正后、前挡风玻璃车架号、正左侧、 正右侧、中控 、 前排 、 后排 、铭牌 、公里数、随车工具、受损照片）</span></h3>
            <div>
              <value :model="curOrder" prop="orderCarVerify.validateImages" type="img"/>
            </div>
          </div>
          <div class="order-block" v-if="curOrder.orderCarVerify && (curOrder.orderCarVerify.specification || curOrder.orderCarVerify.towHook || curOrder.orderCarVerify.ashtray || curOrder.orderCarVerify.toolkit || curOrder.orderCarVerify.cigarLighter || curOrder.orderCarVerify.bellCover || curOrder.orderCarVerify.jack || curOrder.orderCarVerify.antenna || curOrder.orderCarVerify.key || curOrder.orderCarVerify.warningSign || curOrder.orderCarVerify.licensePlateFrame || curOrder.orderCarVerify.footPad || curOrder.orderCarVerify.airPump || curOrder.orderCarVerify.aidPacket || curOrder.orderCarVerify.spareTire)">
            <h3>随车物品</h3>
            <div class="accessory">
              <span v-if="curOrder.orderCarVerify.specification">说明书 <value :model="curOrder" prop="orderCarVerify.specification"/> 本</span>
              <span v-if="curOrder.orderCarVerify.towHook">拖车钩 <value :model="curOrder" prop="orderCarVerify.towHook"/> 个</span>
              <span v-if="curOrder.orderCarVerify.ashtray">烟灰缸 <value :model="curOrder" prop="orderCarVerify.ashtray"/> 个</span>
              <span v-if="curOrder.orderCarVerify.toolkit">工具包 <value :model="curOrder" prop="orderCarVerify.toolkit"/> 个</span>
              <span v-if="curOrder.orderCarVerify.cigarLighter">点烟器 <value :model="curOrder" prop="orderCarVerify.cigarLighter"/> 个</span>
              <span v-if="curOrder.orderCarVerify.bellCover">胎铃盖 <value :model="curOrder" prop="orderCarVerify.bellCover"/> 个</span>
              <span v-if="curOrder.orderCarVerify.jack">千斤顶 <value :model="curOrder" prop="orderCarVerify.jack"/> 个</span>
              <span v-if="curOrder.orderCarVerify.antenna">天　线 <value :model="curOrder" prop="orderCarVerify.antenna"/> 条</span>
              <span v-if="curOrder.orderCarVerify.key">车钥匙 <value :model="curOrder" prop="orderCarVerify.key"/> 把</span>
              <span v-if="curOrder.orderCarVerify.warningSign">警示牌 <value :model="curOrder" prop="orderCarVerify.warningSign"/> 个</span>
              <span v-if="curOrder.orderCarVerify.licensePlateFrame">牌照架 <value :model="curOrder" prop="orderCarVerify.licensePlateFrame"/> 个</span>
              <span v-if="curOrder.orderCarVerify.footPad">脚　垫 <value :model="curOrder" prop="orderCarVerify.footPad"/> 个</span>
              <span v-if="curOrder.orderCarVerify.airPump">气　泵 <value :model="curOrder" prop="orderCarVerify.airPump"/> 个</span>
              <span v-if="curOrder.orderCarVerify.aidPacket">急救包 <value :model="curOrder" prop="orderCarVerify.aidPacket"/> 个</span>
              <span v-if="curOrder.orderCarVerify.spareTire">备　胎 <value :model="curOrder" prop="orderCarVerify.spareTire"/> 个</span>
            </div>
          </div>
          <div class="order-block">
            <h3>订单备注</h3>
            <div><value :model="curOrder" prop="remark"/></div>
          </div>
        </div>
      </el-form>
    </div>
    <div class="op">
      <el-button type="primary" :loading="saving" @click="save">保 存</el-button>
      <el-button type="primary" plain @click="cancel">取 消</el-button>
    </div>
  </div>
</template>

<script>
import Value from '@/components/AdValue'
import AdTable from '@/components/AdTable'
import AdTableColumn from '@/components/AdTable/AdTableColumn'
import AdInputNumber from '@/components/AdInputNumber'
import AdStatusSelect from '@/components/AdStatusSelect'
import AdUpload from '@/components/AdUpload'
import adForm from '@/mixins/adForm'
import { getDetail, add } from '@/api/logistics/arrive'

export default {
  components: { Value, AdTable, AdTableColumn, AdInputNumber, AdStatusSelect, AdUpload },
  mixins: [adForm({add})],
  dicts: ['transport_type','delivery_type','fee_type'],
  data() {
    return {
      detailData: {},
      orderList: [],
      curOrder: {},
      form: { levelId: this.$attrs.id }
    }
  },
  watch: {
    '$attrs.visible': {
      immediate: true,
      handler(visible) {
        if (visible) {
          this.form.levelId = this.$attrs.id
          getDetail(this.$attrs.id).then(res => {
            this.detailData = res.data
            this.orderList = res.data.transportLevelDetailList && res.data.transportLevelDetailList.length > 0 ? res.data.transportLevelDetailList : []
            if (res.data.transportLevelDetailList && res.data.transportLevelDetailList.length > 0) {
              this.$nextTick(() => {
                this.curOrder = this.detailData.transportLevelDetailList[0]
                this.$refs.orderTable.$children[0].setCurrentRow(this.detailData.transportLevelDetailList[0])
              })
            }
          })
        }
      }
    }
  },
  methods: {
    selectOrder(row) {
      this.curOrder = row
    }
  }
}
</script>

<style lang="scss" scoped>
.ad-form { font-size: 12px; color: #000; }
.wrapper { height: 460px; padding: 20px 20px 0; overflow-y: auto; }
.ad-block { margin-bottom: 16px; padding-top: 16px; padding-bottom: 4px; }
.title-bar { margin-bottom: 14px; font-size: 14px; font-weight: bold; }
.item { display: flex; margin-bottom: 12px;
  .label { color: #9a9a9a;}}
.table { margin-bottom: 20px; border-top: 1px solid #e3e3e3; border-left: 1px solid #e3e3e3; }
.tip { font-size: 12px; font-weight: normal; color: #727272; }
.order-block { margin-bottom: 12px; font-size: 12px; }
h3 { margin-bottom: 12px; font-size: 12px; font-weight: bold; }
.accessory > span:after { content: '，' }
.accessory > span:last-child:after { content: '' }
.op { padding-bottom: 20px; }
</style>